

<template>
<section class="good-tea">
    <shop-item :item="fineTea.first"></shop-item>
    <ul class="good-tea-list">
        <li v-for="(type,index) in fineTea.teaTypes" :key="index">
            <h4>{{type.name}}</h4>
            <p>{{type.desp}}</p>
            <section class="thumb">
                <img :src="type.thumb" alt="">
            </section>
        </li>
    </ul>
</section>
</template>
<script>
import shopItem from "../shopItem/shopItem";
export default {
  props: {
      fineTea:{
          type:Object,
          default:{}
      }
  },
  components: {
    shopItem,
  }
};
</script>
<style lang="scss">
@import "../../../assets/scss/_index.scss";
.good-tea{
    display: flex;
    width: 100%;
    height:px2rem(200);
    &-list{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        align-items: center;        
        width: 50%;
        height: 100%;
        li{
            display: flex;
            width: 100%;
            height: 50%;
            justify-content: space-around;            
            align-items: center;
            h4{
                font-size: px2rem(24);
                color: #535353;
                margin-right: px2rem(24);
                margin-top: px2rem(8);     
                margin-left: px2rem(22);           
            }
            p{
                font-size: px2rem(24);
                color: #c1c1c1;
                margin-right: px2rem(40);
                margin-top: px2rem(8);
            }
            .thumb{
                width: px2rem(70);
                height: px2rem(53);
                img{
                    width: 100%;;
                }
            }
            &:nth-of-type(1){
                border-bottom: 1px solid #dddddf;
            }
        }
    }
}
</style>
